@slidePadding: 0px;
@slideHeight: 5rem;
@slideDotsHeight: 0.6rem;

.sliderWrapper {
    overflow: hidden;
    width: 100%;
    // opacity: 0;
    // transition: opacity .3s ease-in;

    &.mounted {
        opacity: 1;
    }

    &.dotsHidden {
        :global {
            .slick-dots {
                height: 0;
                // TODO: 修复样式
                display: none !important;

                li {
                    visibility: hidden;
                }
            }
        }
    }
}

.sliderMain {
    background-color: #ffffff;
    width: 100%;
    //width: calc(~"100% + @{slidePadding}");
    position: relative;
}

.slideItemWrapper {
    width: 100%;
    //width: calc(~"100% - @{slidePadding}");
}

.slideItem {
    width: 100%;
    height: @slideHeight;

    :global {
        .video-play {
            height: 100%;
            opacity: 1;
            transition: opacity 0.3s;

            &:before {
                z-index: 1;
            }
        }
    }
}

:global {
    /* Arrows */
    .slick-slider {
        &:hover {
            .slick-prev,
            .slick-next {
                visibility: visible;

                &.slick-disabled {
                    visibility: hidden;
                }
            }
        }
    }

    .slick-prev,
    .slick-next {
        width: 0.516rem;
        height: 1.032rem;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: transparent;
        position: absolute;
        display: block;
        cursor: pointer;
        line-height: 0;
        font-size: 0;
        top: 50%;
        transform: translate(0, -50%);
        padding: 0;
        border: none;
        outline: none;
        z-index: 10;
        visibility: hidden;
    }

    .slick-prev {
        background-image: url(//cdn.weipaitang.com/res/img/sliderLeft.png);
        left: 0;
    }

    .slick-next {
        background-image: url(//cdn.weipaitang.com/res/img/sliderRight.png);
        right: @slidePadding;
    }

    /** Dots **/
    .slick-dots {
        line-height: @slideDotsHeight;
        height: @slideDotsHeight;
        background-color: #ffffff;
        list-style: none;
        display: block;
        text-align: center;
        padding: 0;
        margin: 0;
        //width: calc(~"100% - @{slidePadding}");
        width: 100%;

        li {
            position: relative;
            display: inline-block;
            margin: 0 3px;
            padding: 0;
            cursor: pointer;
            button {
                border: 0;
                background: transparent;
                display: block;
                background: #cccccc;
                outline: none;
                width: 6px;
                height: 6px;
                border-radius: 100%;
                line-height: 0px;
                font-size: 0px;
                padding: 0;
                color: transparent;
                cursor: pointer;
                &:hover,
                &:focus {
                    outline: none;
                }
            }

            &.slick-active button {
                background: #d32f2f;
            }
        }
    }
}
